import React from 'react'
import Skeleton from 'components/skeleton'
import { Button, Switch, Table } from 'antd'
import Condition from 'components/condition'
const { If } = Condition;

export default {
  key: 'skeleton',
  name: 'Skeleton 骨架屏',
  author: '张然',
  description: '当内容正在加载时显示的骨架屏。',
  isExampleFull: true,
  api: [
    {
      title: 'API',
      data: [{
        param: 'title', description: '是否显示第一行标题。', type: 'bool', defaultValue: 'true'
      }, {
        param: 'titleWidth', description: '第一行标题的宽度。', type: 'string | number', defaultValue: '50%'
      }, {
        param: 'paragraph', description: '段落的行数。', type: 'number', defaultValue: '3'
      }, {
        param: 'paragraphWidth', description: '每一行段落的宽度。', type: 'array', defaultValue: '[\'100%\',..., \'78%\']'
      }, {
        param: 'avatar', description: '是否显示头像。', type: 'bool', defaultValue: 'false'
      }, {
        param: 'loading', description: '为::true::时，显示占位图。反之则直接展示子组件。', type: 'bool', defaultValue: 'false'
      }],
      description: ''
    }
  ],
  example: [
    {
      title: '基本用法',
      description: '最简单的占位效果。',
      state: {

      },
      getMethod: context => {
        return {
        }
      },
      getContent: context => {
        const {  } = context.state;
        return (
          <div>
            <Skeleton/>
          </div>
        )
      }
    },
    {
      title: '带头像的骨架屏',
      description: '带头像。',
      state: {

      },
      getMethod: context => {
        return {
        }
      },
      getContent: context => {
        const {  } = context.state;
        return (
          <div>
            <Skeleton avatar/>
          </div>
        )
      }
    },
    {
      title: '包含子组件',
      description: '当有子组件时用::loading::进行判断。',
      state: {
        loading: true
      },
      getMethod: context => {
        return {
          onChange: loading => context.setState({ loading })
        }
      },
      getContent: context => {
        const { loading } = context.state;
        return (
          <div>
            <Switch onChange={context.onChange} defaultChecked/>
            <br/><br/>
            <Skeleton loading={loading}>
              <h3>All I Got</h3>
              <p>Crawling back home id do anything for you</p>
              <p>And I'm sitting up awake and now I can't forget you</p>
              <p>And I don't know what to do</p>
            </Skeleton>
          </div>
        )
      }
    }
  ]
}
